<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="header">
              <span>总答题量</span>
              <el-tooltip content="指标说明" placement="top">
                <i class="el-icon-warning-outline" />
              </el-tooltip>
            </div>

            <div class="legend">
              260,560
            </div>

            <div class="title">
              <span>
                周同比 12%
                <i class="el-icon-caret-top" style="color:red;" />
              </span>
              <span>
                日环比 11%
                <i class="el-icon-caret-bottom" style="color:green;" />
              </span>
            </div>

            <div class="footer">
              日答题数量
              <span>12,423</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="header">
              <span>试题方向</span>
              <el-tooltip content="指标说明" placement="top">
                <i class="el-icon-warning-outline" />
              </el-tooltip>
            </div>

            <div class="legend">
              <radar />
            </div>

            <div class="title">
              <span />
              <span />
            </div>

            <div class="footer">
              试题库数量
              <span> 10,234</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="header">
              <span>试题学科分布</span>
              <el-tooltip content="指标说明" placement="top">
                <i class="el-icon-warning-outline" />
              </el-tooltip>
            </div>

            <div class="legend">
              <pie />
            </div>

            <div class="title">
              <span />
              <span />
            </div>

            <div class="footer">
              前端试题数量
              <span> 5,234</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="header">
              <span>上周试题新增</span>
              <el-tooltip content="指标说明" placement="top">
                <i class="el-icon-warning-outline" />
              </el-tooltip>
            </div>

            <div class="legend">
              <bar />
            </div>

            <div class="title">
              <span />
              <span />
            </div>

            <div class="footer">
              上周新增总量
              <span>1,234</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="footertabs" style="position: relative;">
      <el-tabs v-model="activeName" style="padding-left: 15px;" @tab-click="handleClick">
        <el-tab-pane label="前端学科" name="first">
          <line1 v-if="activeName==='first'" />
        </el-tab-pane>
        <el-tab-pane label="JAVA学科" name="second">
          <line2 v-if="activeName==='second'" />
        </el-tab-pane>
      </el-tabs>
      <span style="position: absolute; right: 20px; top: 20px; color: #ccc;">
        前端与java学科试题走势图
      </span>

      <div class="right-text">
        <p style="font-size: 1.125rem;">学科试题数量排名</p>
        <nav v-for="item,index in list" :key="index">
          <span class="num" :class="{active:index<3}">{{ index+1 }}</span>
          <span class="left">{{ item.str }}</span>
          <span class="right">{{ item.number }}</span>
        </nav>
      </div>

    </div>
    <div class="copyright">
      Copyright &copy; 2022
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import radar from '@/views/dashboard/compnents/radar.vue'
import pie from '@/views/dashboard/compnents/pie.vue'
import bar from '@/views/dashboard/compnents/bar.vue'
import line1 from '@/views/dashboard/compnents/line1.vue'
import line2 from '@/views/dashboard/compnents/line2.vue'

export default {
  name: 'Dashboard',
  components: {
    radar,
    pie,
    bar,
    line1,
    line2
  },
  computed: {
    ...mapGetters(['name'])
  },
  data() {
    return {
      activeName: 'first',
      list: [
        { str: '前端', number: '5234' },
        { str: 'java', number: '3210' },
        { str: '大数据', number: '1294' },
        { str: 'c++', number: '1001' },
        { str: 'UI', number: '934' },
        { str: 'php', number: '856' },
        { str: 'python', number: '403' },
        { str: '测试', number: '122' }
      ]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.copyright {
    color: #ccc;
    width: 100%;
    height: 1.25rem;
    margin-top: 1.875rem;
    line-height: 1.25rem;
    text-align: center;

}
.right-text {
    // padding: .625rem;
    width: 22.5rem;
    height: 18.75rem;
    position: absolute;
    top: 3.875rem;
    right: 5rem;
    nav {
        padding: 5px;
        width: 20rem;
        color: #595959;
        .num {
            width: 1.875rem;
            height: 1.875rem;
            border: 0.0625rem solid #000;
            border-radius: 50%;
        }
        .left {
            display: inline-block;
            width: 80%;
            padding-left: 1.25rem;
        }
    }
    .active:nth-child(-n + 3) {
        color: #fff;
        background-color: #314659;
    }
}
.dashboard {
    &-container {
        margin: 1.875rem;
    }
    &-text {
        font-size: 1.875rem;
        line-height: 2.875rem;
    }
}
.el-row {
    margin-bottom: 1.25rem;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 0.25rem;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    height: 280px;
    margin-top: -1.25rem;
    border: 1px solid #ccc;
    box-shadow: #ccc 0.125rem 0.125rem;
    .header {
        font-size: 1rem;
        height: 1.5625rem;
        line-height: 1.5625rem;
        display: flex;
        justify-content: space-between;
        color: #ccc;
        i {
            padding-top: 0.3125rem;
        }
    }

    .legend {
        margin-top: 0.5rem;
        background-color: #fff;
        padding-left: 1.25rem;
        height: 9.375rem;
        line-height: 9.375rem;
    }
    .title {
        font-size: 1rem;
        border-bottom: 0.0625rem solid #c9c9c9;
        span {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
    }
    .footer {
        font-size: 1rem;
        span {
            padding-left: 0.625rem;
        }
    }
}
.bg-purple-light {
    background: #e5e9f2;
}
.bg-purple[data-v-106c86ed] {
    padding: 0.5rem 1.25rem;
}
.grid-content {
    border-radius: 0.25rem;
    min-height: 18.75rem;
}
.row-bg {
    padding: 0.625rem 0;
    background-color: #f9fafc;
}
.footertabs {
    margin-top: 1.25rem;
    padding-top: 0.625rem;
    border: 1px solid #ccc;
    box-shadow: #ccc 0.125rem 0.125rem;
}
</style>
